<template>
	<div class="AlarmList-Main">
		<Card>
			<div class="AlarmList-Main-ul-search">
				<div class="AlarmList-Main-ul-search_box" style="margin: 8px 0;height: 48px;">
					<Select v-model="search_value" style="width:300px;float: left;margin-right: 10px">
						<Option v-for="(item, index) in search_value_arr" :value="item.osInfo" :key="index">{{ item.osInfo }}</Option>
					</Select>
					<Button style="" type="primary" class="large" @click="serch">搜索</Button>
					<Button style="" type="primary" class="large" @click="delSerch">刷新</Button>
				</div>
			</div>
			<Table :columns="columns" :data="tableData"></Table>
			<div class="center">
				<div class="pageBox">
					<Page :total="count" show-total :page-size ="pageSize" @on-change="handlePage"/>
				</div>
			</div>
		</Card>
	</div>
</template>

<script>
	export default {
		name: 'resources',
		data () {
			return {
				columns: [
					{
						title: '服务器名称',
						key: 'serverName'
					},
					{
						title: '告警类型',
						key: 'alarmType'
					},
					{
						title: '报警原因',
						key: 'alarmReason'
					},
					{
						title: '报警数值',
						key: 'alarmNumber'
					},
					{
						title: '告警时间',
						key: 'alarmDate'
					},
					{
						title: '告警方式',
						key: 'alarmWay'
					},
					{
						title: '告警人',
						key: 'alarmUserName'
					}
				],
				tableData: [],
				count: 0,
				pageSize: 5,
				page: 1,
				id: 0,
				search_value: '',
				search_value_arr: []
			}
		},
		methods: {
			// 获取服务器下拉列表
			getServerList () {
				this.$api.get(0, '/sys/v2/systemInfo/list', {}, r => {
					if (r.data.code === 0) {
						this.search_value_arr = r.data.data
						// this.search_value = r.data.data
					}
				})
			},
			// 获取告警历史列表
			getList () {
				this.$api.get(0, '/sysalarm/apps/alarm/history/page?page=' + this.page + '&limit=' + this.pageSize + '&serverName=' + this.search_value, {}, r => {
					if (r.data.code === 0) {
						this.tableData = r.data.data.data
						console.log(this.tableData)
						this.count = r.data.data.total
					}
				})
			},
			// 分页页码跳转
			handlePage (value) {
				this.page = value
				this.getList()
			},
			// 搜索
			serch () {
				this.getList()
			},
			// 清空搜索条件
			delSerch () {
				this.search_value = ''
				this.getList()
			}
		},
		mounted () {
			this.getServerList()
			// this.getList()
		}
	}
</script>

<style lang="less">
	li {
		list-style: none;
	}

	.AlarmList-Main {
		/*background: #fff;*/
	}

	.AlarmList-Main-ul-search {
		width: 500px;
		height: 80px;
		overflow: hidden;
	}
</style>
